<template>
  <div class="search">
    <van-search v-model="value" placeholder="搜索歌手/歌曲" background="transparent" autofocus />
    <div class="search-categrou-wrapper" v-show="!value" ref="bscontent">
      <scroll class="shortcut" :data="shortcut" ref="bsbody" :refreshDelay="100">
        <div>
          <div class="search-category w700">
            <div class="search-category-tit">
              搜索历史
              <div class="iconfont-group" :class="[{'on':garbageOpen}]" @click="deleteAllHis">
                <i class="iconfont iconlajitonggai"></i>
                <i class="iconfont iconlajitongshen"></i>
              </div>
            </div>
            <search-list :searches="searchHistory" @select="selectItem" @delete="deleteSearch"></search-list>

            <span v-show="!searchHistory.length" class="nohis">暂无搜索历史</span>
          </div>
          <div class="search-category w700">
            <div class="search-category-tit">热搜榜</div>
            <ul class="searchHotList">
              <li
                v-for="(item,index) in hotSearchList"
                :key="index"
                @click="handleHotkeySelect(item)"
              >
                <div class="index">{{index+1}}</div>
                <div class="content-detail">
                  <h2 class="name">
                    <span>{{item.searchWord}}</span>
                    <div v-lazy:background-image="item.iconUrl" class="iconType"></div>
                  </h2>
                  <p class="desc">{{item.content}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </scroll>
    </div>
    <div class="search-result" v-show="value" ref="resultref">
      <suggest :query="value" @select="onSaveSearch" />
    </div>
    <audio class="garbageAudio" src="/Music_H5/imgs/lj.wav" ref="garbageAudio"></audio>
  </div>
</template>

<script>
import { Search } from "vant";
import { getSearchHot } from "@/request/api";
import { playListMixin } from "@/common/mixin.js";
import Suggest from "@/components/suggest/suggest";
import SearchList from "@/base/search-list/search-list";
import { mapActions, mapGetters } from "vuex";
import { Dialog } from "vant";
import Scroll from "@/base/scroll/scroll";
import Song from "@/common/song";

export default {
  mixins: [playListMixin],
  components: {
    [Search.name]: Search,
    Suggest,
    SearchList,
    Scroll
  },
  data() {
    return {
      value: "",
      hotSearchList: [],
      searchHisList: [],
      // 垃圾桶开启：
      garbageOpen: false,
      [Dialog.Component.name]: Dialog.Component
    };
  },
  created() {
    this._getSearchHot();
  },
  computed: {
    shortcut() {
      return this.hotSearchList.concat(this.searchHisList);
    },
    ...mapGetters(["searchHistory"])
  },
  watch: {
    value(newValue) {
      if (!newValue) {
        setTimeout(() => {
          this.$refs.bsbody.refresh();
        }, 20);
      }
    }
  },
  methods: {
    handlePlayList(playlist) {
      const bottom = playlist.length > 0 ? "60px" : "";
      this.$refs.resultref.style.bottom = bottom;
      this.$refs.bscontent.style.bottom = bottom;
      this.$refs.bsbody.refresh();
    },
    async _getSearchHot() {
      const { data: res } = await getSearchHot();
      this.hotSearchList = res.slice(0, 8);
      console.log(this.hotSearchList);
    },
    ...mapActions([
      "saveSearchHistory",
      "insertSong",
      "deleteSearchHistory",
      "clearSearchHistory"
    ]),

    onSaveSearch(item) {
      this.saveSearchHistory(item);
    },
    selectItem(item) {
      // 直接返回的是对象
      console.log(typeof item);
      // 二次包装后成函数实例后可以使用函数中的方法
      this.insertSong(new Song(item));
    },
    deleteSearch(item) {
      this.deleteSearchHistory(item);
      this.$refs.bsbody.refresh();
    },
    deleteAllHis() {
      this.garbageOpen = true;
      Dialog.confirm({
        message: "是否清空历史记录?",
        className: "dialog_themedark",
        confirmButtonText: "清空",
        width: "250px"

        // transition: "zoomIn"
      })
        .then(() => {
          this.clearSearchHistory();
          this.garbageOpen = false;
          this.$refs.garbageAudio.play();
          this.$refs.bsbody.refresh();
        })
        .catch(() => {
          this.garbageOpen = false;
        });
    },
    handleHotkeySelect(item) {
      this.value = item.searchWord;
    }
  }
};
</script>

<style lang="less" >
.search-categrou-wrapper {
  position: absolute;
  top: 60px;
  bottom: 0;
  width: 100%;
}
.shortcut {
  height: 100%;
  overflow: hidden;
}
.search-result {
  position: fixed;
  width: 100%;
  top: 178px;
  bottom: 0;
}
.search {
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;
  z-index: 66;
  .van-search {
    margin-bottom: 20px;
  }
  .van-cell {
    padding: 0px 8px 0px 0;
  }
  .van-icon-search {
    font-size: 20px;
    color: @mc;
    line-height: 40px;
  }
  .van-search__content {
    background: #333;
    border-radius: 6px;
    line-height: 40px;
  }
  .van-field__control {
    .cf;
    height: 40px;
  }
}
.search-category-tit {
  margin-top: 20px;
  .cf;
  font-size: 0.3733rem;
  position: relative;
  .iconfont-group {
    .extend-click();
    position: absolute;
    right: 0;
    top: 0;
    color: @mc;
    display: inline-flex;
    flex-flow: column nowrap;

    .iconlajitonggai {
      transform-origin: left bottom;
      .tf5(ease);
    }
    .iconlajitongshen {
      position: relative;
      bottom: 8px;
    }
    &.on {
      .iconlajitonggai {
        transform: rotate(-20deg) translateX(2px);
      }
    }
  }
  .iconlajitong {
    position: absolute;
    right: 0;
    top: 0;
    color: @mc;
  }
}
.searchHotList {
  .flex-wrap-sb;
  margin-top: 15px;

  li {
    width: 48%;
    .flex-row-nowrap(center);
    margin-bottom: 15px;

    .index {
      font-size: 16px;
      margin-right: 14px;
      font-family: DINRegular;
      color: @mc;
      border-radius: 50%;
      font-style: italic;
    }
    .name {
      .sl;
      color: @color-text;
      font-size: 14px;
      .flex-row-nowrap(center);
      .iconType {
        width: 20px;
        height: 16px;
        .bz(contain);
        margin-left: 5px;
      }
    }
    .content-detail {
      width: 100%;
    }
    .desc {
      .sl;
      margin-top: 6px;
      color: @color-text-d;
      font-size: 12px;
      padding-right: 15px;
    }
  }
}
.searchHisList {
}
.nohis {
  font-size: 14px;
  padding: 16px 0;
  display: block;
  color: rgba(255, 255, 255, 0.3);
}
</style>